<template>
  <div class="related-order-box">
    <select-with-user-load
      ref="mengliSuppliers"
      v-model="selectItem"
      :disabled="isAutoCreate && isEdit"
      :loadmore-method="getMengliSuppliers()"
      :hide-select-list="selectItem.id?[selectItem]:[]"
      :clearable="true"
      :style="styleSet"
      visible-change-data
      placeholder="请选择"
      value-type="object"
      key-name="id"
      label-name="keyword"
      extend-class="image"
      filterable
      collapse-tags
      add-new
      add-new-str="添加新供应商"
      @addNewClick="toCreateSupplier"
      @change="mengliSuppliersChange"
      @clear="mengliSuppliersChange"/>
  </div>
</template>
<script>
import SelectWithUserLoad from '@/components/Common/selectWithUserLoad';
import { getMengliSuppliers } from '@/api/mengliOrder';
export default {
  name: 'MengliSuppliersLoad',
  components: { SelectWithUserLoad },
  props: {
    options: { // 选中项， {id: '', keyword: '' }
      type: Object,
      default: () => {}
    },
    styleSet: {
      type: String,
      default: ''
    },
    isAutoCreate: {
      type: Boolean,
      default: false
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      selectItem: { id: '', keyword: '' }
    };
  },
  watch: {
    options: {
      handler(value) {
        this.selectItem = value.id ? value : { id: '', keyword: '' };
      },
      deep: true
    }
  },
  created() {
    this.selectItem = this.options.id ? this.options : { id: '', keyword: '' };
  },
  methods: {
    /**
     * 获取下拉数据
     */
    // 获取萌力供应商
    getMengliSuppliers() {
      const a = function(params) {
        return new Promise((resolve, reject) => {
          getMengliSuppliers(params).then(res => {
            const data = res;
            data.data.items.forEach(i => {
              i.keyword = i.supplier;
            });
            resolve(data);
          }).catch(err => {
            reject(err);
          });
        });
      };
      return a;
    },
    mengliSuppliersChange(data = { id: -1, keyword: '' }) {
      this.$emit('mengliSuppliersChange', data);
    },
    getMengliItem(supplierName) {
      return new Promise((resolve, reject) => {
        const params = {
          page: 1,
          perPage: 15,
          userStatus: -1,
          keyword: supplierName
        };
        getMengliSuppliers(params).then(res => {
          res.data.items.forEach(i => {
            i.keyword = i.supplier;
          });
          resolve(res);
        }).catch(err => {
          reject(err);
        });
      });
    },
    toCreateSupplier() {
      const routeUrl = this.$router.resolve({
        name: 'supplierManage',
        query: {
          toCreate: 1
        }
      });
      window.open(routeUrl.href, '_blank');
    }
  }
};
</script>
<style lang="scss" scoped>
</style>
